<template>
  <div class="app-container" v-loading="loading">
    <div class="head">
      <div class="head_box_left">
        <div class="head_box">
          <div class="head_box_detail head_box_detail_new" style="margin-right: 10px">
            <div class="num">{{info.soldNum}}</div>
            <div class="txt">出售卡（张）</div>
          </div>
          <div class="head_box_detail head_box_detail_new" style="margin-right: 10px">
            <div class="num">{{info.cardNum}}</div>
            <div class="txt">卡总数（张）</div>
          </div>
          <div class="head_box_detail head_box_detail_new" style="margin-right: 10px">
            <div class="num">{{info.destroyCardNum}}</div>
            <div class="txt">销毁数量（张）</div>
          </div>
          <div class="head_box_detail head_box_detail_new">
            <div class="num">{{info.memberNum}}</div>
            <div class="txt">持卡会员（人）</div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="listBox">
      <div class="head_box_search_info">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="" prop="query">
            <el-input v-model="queryParams.query" placeholder="姓名/手机号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>  
        <div>
          <export-excel-button title="持卡会员列表" action="/merchant/equity/card/issue/customer/export"
            :params="ExportParams" />
        </div>
      </div>
      <el-table :data="equityCardList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="客户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
        <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="手机号码" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
        <el-table-column label="持卡天数" align="center" prop="dayNum" :show-overflow-tooltip="true" />
        <el-table-column label="持卡数量" align="center" prop="cardNum" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleView(scope.row)">会员详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>
</template>
<script>
  import {
    customerCount,
    customerList,
  } from "@/api/merchantsNFR/nfrIssue";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    name: "",
    components: {
      ExportExcelButton
    },
    data() {
      return {
        loading: false,
        equityCardList: [],
        changeIndex: 0, //统计类型 0 全部 1 本周
        info: {}, // 统计详情
        id: '',
        total: 0, // 总条数
        queryParams: {
          cardId: '',
          pageNum: 1,
          pageSize: 10,
          query: null
        },
        cardName: '', //卡名称
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.id = this.$route.query.id;
      this.cardName = this.$route.query.cardName;
      this.getCustomerCount()
      this.getList()
    },
    methods: {
      change(e) { //切换总  周数据
        this.changeIndex = e
        this.getCustomerCount()
      },
      getCustomerCount() { //持卡会员统计
        this.loading = true;
        let data = {
          cardId: this.id,
        }
        customerCount(data).then(res => {
          this.info = res.result
          this.loading = false;
        }).catch(res => {
          this.loading = false;
        })
      },
      getList() { //持卡会员列表
        this.loading = true;
        this.queryParams.cardId = this.id
        customerList(this.queryParams).then(response => {
          this.equityCardList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      handleView(row) { //会员详情
       
        this.$router.push({
          path: "/members/Prepaid-details",
          query: {
            id: row.customerId,
            type: 2,
          },
        })
      },
      cardBill(row) { //用卡详情
        console.log(this.cardName)
        this.$router.push({
          path: "/moneyManagement/equityCardBill-list",
          query: {
            name: this.cardName,
          },
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },

    }
  };

</script>
<style scoped>
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: wrap-; */
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
  }

  .head_box_left {
    display: flex;
    flex-direction: row;
  }

  .head_box {
    min-width: 350px;
    height: 140px;
    border-radius: 10px;
    display: flex;
    /* border: 1px solid #ddd; */
    margin-right: 20px;
    position: relative;
    background: #FFF6F6;
  }

  .head_nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 82px;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #444;
    border: 1px solid #FF8A00;
    border-radius: 2px;
  }

  .head_nav .head_nav_box {
    cursor: pointer;
    font-size: 12px;
    width: 50%;
    text-align: center;
    line-height: 18px;
    color: #FF3D00;
  }

  .head_box2 {
    min-width: 400px !important;
    background: #FFFAF2;
  }

  .head_box2 .num {
    color: #FF8A00;
  }

  .head_box_detail {
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* start */
  .head_box_detail_new {
    /* width: 25%; */
    min-width: 100px;
  }

  .head_box_search_info {
    display: flex;
    flex-direction: row;
    /* height: 140px; */
    margin-bottom: 20px;
    align-items: flex-end;
    justify-content: space-between;
  }

  .head_box_search_info .el-form-item {
    margin-bottom: unset;
  }

  @media (max-width: 1600px) {
    .head {
      flex-wrap: wrap;
    }

    .head_box_search_info {
      height: 70px;
    }
  }

  /* end */
  .num {
    margin-bottom: 8px;
    font-size: 30px;
    color: #FF3434;
    font-weight: 600;
  }

  .txt {
    font-size: 12px;
    color: #666666;
  }

  .active_color {
    background: #FF8A00;
    color: #fff !important;
  }

</style>
